<template>
     <el-button type="success" @click="batchSaveDetails" class="add-button">添加</el-button>
  <div class="quality-report-list">
    <h2>质检报工记录</h2>
    <!-- 工序信息表 -->
    <el-card class="mb-20">
      <el-table :data="planList" border style="width: 100%">
        <el-table-column type="index" label="序号" width="50" />
        <el-table-column prop="processCode" label="工序编码" />
        <el-table-column prop="processName" label="工序名称" />
        <el-table-column prop="processingOrder" label="加工顺序" />
        <el-table-column prop="processFlow" label="工艺流程" />
        <el-table-column prop="person" label="负责人" />
        <el-table-column prop="department" label="所在部门" />
        <el-table-column prop="reportingTime" label="报工时间" />
        <el-table-column prop="quantity" label="完工数量" />
        <el-table-column prop="productionPersonnel" label="生产人员" />
        <el-table-column prop="departmentSS" label="所在部门" />
        <el-table-column prop="reportingpersonnel" label="报工人员" />
        <el-table-column prop="qualifiedQuantity" label="合格数量" />
        <el-table-column prop="unqualifiedQuantity" label="不合格数量" />
        <el-table-column label="合格率">
          <template #default="scope">
            {{ scope.row.quantity ? ((scope.row.qualifiedQuantity / (scope.row.qualifiedQuantity + scope.row.unqualifiedQuantity)) * 100).toFixed(2) + '%' : '0%' }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="140">
            <template #default="scope">
              <el-button type="primary" link @click="GetBYIdProductionPlanning(scope.row.qualityReportWorkid)">工单详情页</el-button>
              <el-button type="info" link @click="DeleteProductionPlanning(scope.row.qualityReportWorkid)">删除</el-button>
            </template>
          </el-table-column>
      </el-table>
      <div style="margin-top: 20px">
        <el-pagination
          v-model:current-page="page.pageindex"
          v-model:page-size="page.pageSize"
          :page-sizes="[4, 8, 15, 20]"
          :background="true"
          prev-text="上一页"
          next-text="下一页"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total.totalCount"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

 <script setup>
  import { ref, reactive, onMounted } from 'vue';
  import { Materialread, Materialwrite } from '@/axios/axiosHelper';
  import { ElMessage, ElMessageBox } from 'element-plus';
  import router from '@/router';
  import axios from 'axios';

  const prolist = ref({

    qualityWorkOrder:'',
    qualityWorkOrderNumber:'',
    GenerateItems:'',
    QualityPerson:'',
    QualityDepartment:'',
  });
  
  // 定义分页总数
  const total = ref({
    totalCount: 0,
    totalPage: 0,
  });
  
  // 定义分页对象
  const page = ref({
    pageindex: 1,
    pageSize: 5,
  });
  
  const formatDate = (dateStr) => {
    const date = new Date(dateStr);
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    const hour = String(date.getHours()).padStart(2, '0');
    const minute = String(date.getMinutes()).padStart(2, '0');
    const second = String(date.getSeconds()).padStart(2, '0');
    return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
  };
  

  
  // 模拟生产计划列表数据
  const planList = ref([
    {
        "qualityReportWorkid": '',
        "processCode": "",
        "processName": "",
        "processingOrder": "",
        "processFlow": "",
        "person": "",
        "department": "",
        "reportingTime": "",
        "quantity": '',
        "productionPersonnel": " ",
        "departmentSS": "sdfa",
        "reportingpersonnel": "",
        "qualifiedQuantity": '',
        "unqualifiedQuantity": '',
        status: '',
        "isDel": false
    }
  ]);
  
  // 表格引用
  const tableRef = ref(null);
  
  // 全选状态
  const allChecked = ref(false);
  
  // 选中的 ID 列表
  const checkedIds = ref([]);
  
  const ShowMaterials = () => {
    Materialread.get("f-read/api/Arrival/GetQualityReportWork", {
      params: {
        pageindex: page.value.pageindex,
        pageSize: page.value.pageSize,

    
      }
    }).then((res) => {
       planList.value = res.data.data.list;
      console.log("显示数据", res.data.data);
  
      total.value.totalCount = res.data.data.totalCount;
      total.value.totalPage = res.data.data.totalPage;
      // 重置全选状态和选中的 ID 列表
      allChecked.value = false;
      checkedIds.value = [];
      console.log(res.data.data);
    }).catch((error) => {
      console.error('接口请求失败:', error);
      ElMessage.error('数据获取失败，请稍后重试');
    });
  };
  
// 编辑跳转修改
const GetBYIdProductionPlanning = (qualityReportWorkid) => {
    router.push({
        name: 'FTQualityReportWork',
        query: {
            qualityReportWorkid: qualityReportWorkid
        }
    });
    console.log(qualityReportWorkid);
};

//跳转添加
const batchSaveDetails = () => {
     router.push({
        name: 'AddQualityReportWork',
        
    });
    // console.log(feedingId);
}
  
  const DeleteProductionPlanning = async (qualityReportWorkid) => {
    try {
      const confirmResult = await ElMessageBox.confirm(
        '确认删除该条记录？',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      );
      if (confirmResult === 'confirm') {
        const response = await Materialwrite.post(
          `f-write/api/Arrival/DelQualityReportWork`,
          { qualityReportWorkid: qualityReportWorkid.toString() }, // 修改这里，将参数放在请求体中
          {
            params: {QualityReportWorkid: qualityReportWorkid.toString()} // 这里保持为空，因为参数已经在请求体中
          }
        );
        if (response.data.code === 200) {
          ElMessage.success('删除成功');
          ShowMaterials(); // 调用 ShowMaterials 方法刷新数据
        } else {
          ElMessage.error(`删除失败：${response.data.message}`);
        }
      }
    } catch (error) {
      if (error!== 'cancel') {
        console.error('删除错误:', error);
        ElMessage.error('删除失败，请检查网络或联系管理员');
      }
    }
  };
  const handleSizeChange = (val) => {
    page.value.pageSize = val;
    ShowMaterials();
  };
  
  const handleCurrentChange = (val) => {
    page.value.pageindex = val;
    ShowMaterials();
  };
  

  onMounted(() => {
    ShowMaterials();
   
  });
  </script>
  
  <style scoped>
  body {
    font-family: 'Arial', sans-serif;
    background-color: #f0f2f5;
    margin: 0;
    padding: 0;
  }
  
  .action-buttons {
    display: flex;
    justify-content: center;
    padding: 20px;
  }
  
  .import-button,
  .add-button,
  .search-button {
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  
  .import-button {
    border: 1px solid #ccc;
    background-color: white;
    color: #333;
    margin-right: 10px;
  }
  
  .add-button {
    border: none;
    background-color: #42b983;
    color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  .search-button {
    border: 1px solid #42b983;
    background-color: white;
    color: #42b983;
  }
  
  .search-section {
    background-color: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    margin: 0 20px 20px;
  }
  
  .page-title {
    text-align: center;
    color: #2c3e50;
    margin-bottom: 20px;
  }
  
  .table-container {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    margin: 0 20px;
    max-height: 400px;
    overflow-y: auto;
  }
  
  .el-table {
    width: 100%;
    border-collapse: collapse;
  }
  
  .el-table__header-wrapper {
    background-color: #f4f4f4;
  }
  
  .el-table__header th {
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid #ccc;
    color: #333;
  }
  
  .el-table__body td {
    padding: 10px;
    border-bottom: 1px solid #eee;
    color: #666;
  }
  
  .edit-button,
  .delete-button {
    color: #42b983;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
  }
  
  .edit-button:hover {
    background-color: #f0f9eb;
  }
  
  .delete-button:hover {
    color: red;
  }
  
  .el-pagination {
    display: flex;
    justify-content: center;
    margin: 20px 0;
  }
  </style>